<template />
  <div class style="height: 100%;padding: 20px;">
    <div :id="uniqueID" style="height: 100%;width: 100%;margin-top: 1%;"></div>
  </div>
<script>
import echarts from 'echarts'
import uuidv1 from 'uuid/v1'

import defaultmixins from '@/mixins/bigScreen/defaultmixins'
export default {
  name: 'LineChart',
  mixins: [defaultmixins],
  data() {
    return {
      uniqueID: '',
      list: [
        {
          num: 250,
          title: '实时购电量',
          unit: 'kWh',
          color: '#FFFD9B'
        },
        {
          num: 352,
          title: '实时购电量',
          unit: 'kWh',
          color: '#4FC7FF'
        },
        {
          num: 423,
          title: '实时购电量',
          unit: 'kWh',
          color: '#5BFBCC'
        }
      ]
    }
  },
  created() {
    this.uniqueID = uuidv1()
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID))
    var scale = 0.3

    var option = {
      title: null,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: '#ddd'
          }
        },
        backgroundColor: 'rgba(255,255,255,1)',
        padding: [5, 10],
        textStyle: {
          color: '#7588E4'
        },
        extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
      },
      legend: {
        right: 20 * scale,
        data: ['购电', '煤机组']
      },
      xAxis: {
        type: 'category',
        data: ['00:00', '2:00', '6:00', '10:00', '14:00', '18:00', '22:00'],
        boundaryGap: false,
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#609ee9'
          }
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: 14 * scale
          }
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: 14 * scale
          }
        }
      },
      series: [{
        name: '购电',
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        data: ['240', '110', '100', '110', '120', '140', '200'],
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(255, 253, 155, 0.6)'
            }, {
              offset: 1,
              color: 'rgba(255, 253, 155, 0.2)'
            }], false)
          }
        },
        itemStyle: {
          normal: {
            color: '#FFFD9B'
          }
        },
        lineStyle: {
          normal: {
            width: 1
          }
        }
      }, {
        name: '煤机组',
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        data: ['120', '100', '114', '222', '123', '120', '233'],
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(79, 199, 255, 0.6)'
            }, {
              offset: 1,
              color: 'rgba(79, 199, 255, 0.2)'
            }], false)
          }
        },
        itemStyle: {
          normal: {
            color: '#4FC7FF'
          }
        },
        lineStyle: {
          normal: {
            width: 1
          }
        }
      }, {
        name: '太阳能',
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        data: ['190', '220', '230', '231', '233', '256', '279'],
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(91, 251, 204, 0.6)'
            }, {
              offset: 1,
              color: 'rgba(91, 251, 204, 0.2)'
            }], false)
          }
        },
        itemStyle: {
          normal: {
            color: '#5BFBCC'
          }
        },
        lineStyle: {
          normal: {
            width: 1
          }
        }
      }]
    }

    myChart.setOption(option)

    window.addEventListener('resize', () => {
      this.myChart.resize()
    })
  }
}
</script>

<style scoped>

</style>
